<script setup lang="ts">
import { LyTypewriter } from 'last-year-components'
import { ref } from 'vue'
/* 打字机模块 start */
let daziji = ref("")
const options = {
  // el: '.moon-title',
  content: '洪荒万年，独对穹苍灭绝，谓之大寂寞可也.',
  startSpeed: 100,
  endSpeed: 120,
  waitTime: false,
  isWay: 'loop'
}
// 注册
const lyTypewriter = new LyTypewriter(options)
// 实例化
lyTypewriter.typeCharacter()
// 调用方法
lyTypewriter.on('character', (data: { content: string, status: boolean }) => {
  // lyTypewriter.typeCharacter()  //当前打字的内容
  //当前打字轮次是否结束
  // console.log(data)
  daziji.value = data.content
})
/* 打字机模块 end */

</script>

<template>
  <div class="moon-banner">
    <!-- 名人名言 -->
    <div class="banner-text">
      <h1>名人名言</h1>
      <p>{{ daziji }}</p>
      <p class="auther">龙应台</p>
    </div>
  </div>
  <!-- 栏目模块 end -->
</template>



<style lang="less" scoped>
/*  栏目模块 start */
.moon-banner {
  width: 100%;
  height: 360px;
  background: url('../assets/img/feng3.jpg') no-repeat;
  background-size: 100%;
  overflow: hidden;

  // 名人名言
  .banner-text {
    width: 500px;
    height: 200px;
    margin: 100px auto;
    color: #fff;
    // background: orange;
    font-family: '楷体';

    h1 {
      text-align: center;
      height: 30px;
      font-size: 28px;
    }

    p {
      height: 30px;
      margin-top: 50px;
      text-align: center;
      font-size: 18px;
    }

    .auther {
      height: 50px;
      text-align: center;
      font-size: 16px;
    }
  }
}

/* 栏目模块 end */
</style>